<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../js/bootstrap-treeview/bootstrap-treeview.min.css">
    <link rel="stylesheet" href="../js/bootStrap-addTabs/bootstrap.addtabs.css">
    <link rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.min.css">
    <link rel="stylesheet" href="../js/kindeditor-4.1.10/themes/default/default.css"/>
</head>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="../js/bootstrap-bootbox/bootbox.js"></script>
<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
<script type="text/javascript" src="../js/kindeditor-4.1.10/kindeditor-all.js"></script>
<body>

<!-- container-fluid 流式布局 -->
<div class="container-fluid">
    <form id="addForm" class="form-horizontal">
        <input type="hidden" id="zixunid" name="zixunid" th:value="${zixun.zixunid}" class="form-control"/>
        <br/>
        <div class="row">
            <div class="col-xs-1">标题</div>
            <div class="col-xs-3">
                <input type="text" id="zixuntitle" name="zixuntitle" th:value="${zixun.zixuntitle}" class="form-control"/>
            </div>
            <div class="col-xs-1">作者</div>
            <div class="col-xs-2">
                <input type="text" id="zixunauthor" name="zixunauthor" th:value="${zixun.zixunauthor}" class="form-control"/>
            </div>
        </div>
        <br/>

        <br/>
        <div class="row">
            <div class="col-xs-1">封面</div>
            <div class="col-xs-5">
                <img th:src="${zixun.zixunimg}" height="180px;" alt="照片跑了">
            </div>
            <div class="col-xs-6">
                <input type="hidden" id="testimg" name="zixunimg" th:value="${zixun.zixunimg}" />
                <input type="file" multiple class="projectfile" accept="image/*" name="img" id="fileImg">
            </div>
        </div>

        <br/>
        <div class="row">
            <div class="col-xs-1">内容</div>
            <div class="col-xs-11">
                <textarea rows="15" cols="140" id="content" name="zixunconnect" th:text="${zixun.zixunconnect}"></textarea>
            </div>
        </div>

        <br/>
        <div class="row">
            <div class="col-xs-11"></div>
            <div class="col-xs-1">
                <input type="button" class="btn btn-success" onclick="updateZixun()" value="保存" />
            </div>
        </div>
    </form>
</div>

</body>
<script type="text/javascript">

    //修改资讯
    function updateZixun(){
        if( !checkTitle() || !checkName() ){
            return false;
        }
        $.ajax({
            url: "../backstage/updateZixun",
            type: "post",
            data: $("#addForm").serialize(),
            success:function (data){
                alert("上传成功!");
                top.location.href="../backstage/index";
            },error:function(){
                alert("上传失败！");
            }
        })
    }

    //校验标题是否为空
    $("#zixuntitle").blur(checkTitle=function(){
        var titleValue = $("#zixuntitle").val();
        if(titleValue==null || titleValue==''){
            alert("标题不能为空！");
            return false;
        }
        return true;
    })

    //校验名字是否为空
    $("#zixunauthor").blur(checkName=function(){
        var nameValue = $("#zixunauthor").val();
        if(nameValue==null || nameValue==''){
            alert("作者名不能为空！");
            return false;
        }
        return true;
    })

    //加载 datetimepicker 日期界面
    $(".date").datetimepicker({
        language:"zh-CN", 	//显示中文
        format:"yyyy-mm-dd hh:ii:ss",	//显示格式
        minView:"month",	//设置只显示到月份
        initialDate:new Date(),	//初始化当前时间
        autoclose:true,		//选中自动关闭
        todayBtn:true	//显示今日
    })

    //文件上传
    $('#fileImg').fileinput({	//加载文件
        language: 'zh', //设置语言
        uploadUrl: '../file/uploadFiles', //文件要上传的路径、地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],	//后台能接收的文件类型
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-success", //按钮样式--颜色  btn btn-danger 红色	btn btn-primary 蓝色	btn btn-success 绿色	btn btn-info 浅蓝
        dropZoneEnabled: true,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        maxFileSize: 0,//限制上传文件大小，单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",	//？？？
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    }).on('fileuploaded', function(event, data, previewId, index) {	//上传后的回填
        var imgval = $('#testimg').val();
        if(imgval == null || imgval == "" || imgval == undefined){
            imgval = data.response.img;
        }else{
            imgval = data.response.img;
        }
        $('#testimg').val(imgval);
        //var attr=$(".file-caption-name").html();
        //var name=attr.substring(0,attr.lastIndexOf("."));//截取文件名
        //var type=attr.substring(attr.lastIndexOf(".")+1);//获取文件后缀
        //$("#fileoldname").val(name);
        //$("#filetype").val(type);
        //alert(name);
    });

    //KindEditor
    var editor;
    KindEditor.ready(function(K) {//将编辑器添加到文档中
        editor = K.create('#content', {
            cssPath : '<%=request.getContextPath()%>/js/kindeditor-4.1.10/plugins/code/prettify.css',
            //指定编辑器iframe document的CSS文件，用于设置 可视化区域的样式。
            uploadJson: "../js/kindeditor-4.1.10/jsp/upload_json.jsp",
            //指定上传文件的服务器端程序。
            fileManagerJson: "../js/kindeditor-4.1.10/jsp/file_manager_json.jsp",
            //指定浏览远程图片的服务器端程序。
            allowFileManager : true,//true时显示浏览远程服务器按钮 ;默认值: false
            //将富文本编辑中的内容同步到表单序列化中
            afterBlur:function(){this.sync();}
        });
    });

</script>
</html>